<template>
  <div class="feedback-container">
    <div class="filter-bar">
      <div class="filter-input">
        <span class="label">主题：</span>
        <input type="text" placeholder="请输入" v-model="filter.subject" />
      </div>
      <div class="filter-input">
        <span class="label">类型：</span>
        <select v-model="filter.type">
          <option value="">请选择</option>
          <option value="feedback">意见反馈</option>
          <option value="complaint">投诉</option>
        </select>
      </div>
      <button class="query-btn" @click="handleQuery">查询</button>
      <button class="reset-btn" @click="handleReset">重置</button>
    </div>

    <div class="summary-bar">
      <span class="selected-count">已选择 {{ selectedCount }} 项</span>
      <span class="query-time">本次查询耗时：{{ queryTime }}毫秒</span>
      <button class="clear-btn" @click="handleClear">清空</button>
    </div>

    <table class="feedback-table">
      <thead>
        <tr>
          <th width="60px">序号</th>
          <th width="120px">主题</th>
          <th width="120px">类型</th>
          <th>内容</th>
          <th width="150px">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in filteredItems" :key="index">
          <td>{{ index + 1 }}</td>
          <td>{{ item.subject }}</td>
          <td>{{ item.type }}</td>
          <td>{{ item.content }}</td>
          <td>
            <button class="action-btn process-btn" @click="handleProcess(index)">处理</button>
            <button class="action-btn detail-btn" @click="handleDetail(index)">详情</button>
          </td>
        </tr>
      </tbody>
    </table>
          <!-- 分页组件 -->
          <el-pagination
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
          ></el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        subject: '',
        type: ''
      },
      queryTime: 345,
      selectedCount: 2,
      items: [
        {
          subject: '考试管理',
          type: '意见反馈',
          content: '考试操作不方便'
        },
        {
          subject: '考试管理',
          type: '意见反馈',
          content: '考试操作不方便'
        },
        {
          subject: '考试管理',
          type: '投诉',
          content: '考试操作不方便'
        }
      ],
      pagination: {
          currentPage: 1,
          pageSize: 10,
          total: 100
        }
    };
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => {
        const subjectMatch = item.subject.includes(this.filter.subject);
        const typeMatch = this.filter.type ? item.type === this.filter.type : true;
        return subjectMatch && typeMatch;
      });
    }
  },
  methods: {
    handleQuery() {
      // Simulate query time
      this.queryTime = Math.floor(Math.random() * 500) + 100;
    },
    handleReset() {
      this.filter = {
        subject: '',
        type: ''
      };
      this.queryTime = 345;
    },
    handleClear() {
      this.selectedCount = 0;
    },
    handleProcess(index) {
      alert(`处理: ${this.filteredItems[index].subject}`);
    },
    handleDetail(index) {
      alert(`详情: ${this.filteredItems[index].content}`);
    }
  }
};
</script>

<style scoped>
.feedback-container {
  font-family: Arial, sans-serif;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.filter-bar {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-input {
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.filter-input .label {
  margin-right: 5px;
  font-size: 14px;
  white-space: nowrap;
}

.filter-input input,
.filter-input select {
  padding: 5px 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 32px;
  min-width: 120px;
}

.query-btn,
.reset-btn {
  padding: 7px 15px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-right: 10px;
}

.query-btn {
  background-color: #409eff;
  color: white;
  border: 1px solid #409eff;
}

.query-btn:hover {
  background-color: #66b1ff;
}

.reset-btn {
  background-color: white;
  color: #606266;
  border: 1px solid #dcdfe6;
}

.reset-btn:hover {
  color: #409eff;
  border-color: #c6e2ff;
  background-color: #ecf5ff;
}

.summary-bar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: #606266;
}

.selected-count {
  margin-right: 20px;
}

.query-time {
  margin-right: 20px;
}

.clear-btn {
  background: none;
  border: none;
  color: #409eff;
  cursor: pointer;
  padding: 0;
}

.clear-btn:hover {
  color: #66b1ff;
}

.feedback-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.feedback-table th,
.feedback-table td {
  border: 1px solid #ebeef5;
  padding: 12px 15px;
  text-align: left;
}

.feedback-table th {
  background-color: #f5f7fa;
  font-weight: 500;
  color: #909399;
}

.feedback-table tr:hover {
  background-color: #f5f7fa;
}

.action-btn {
  padding: 5px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  margin-right: 5px;
  border: 1px solid transparent;
}

.process-btn {
  background-color: #409eff;
  color: white;
}

.process-btn:hover {
  background-color: #66b1ff;
}

.detail-btn {
  background-color: white;
  color: #409eff;
  border-color: #c6e2ff;
}

.detail-btn:hover {
  color: #66b1ff;
  background-color: #ecf5ff;
}

.pagination {
    margin-top: 20px;
    text-align: right;
  }
</style>